<template>
  <el-card>
    <el-row :gutter="20" class="header">
      <el-col :span="7">
        <el-input :placeholder="$t('table.placeholder')" clearable v-model="queryForm.query"></el-input>
      </el-col>
      <el-button type="primary" :icon="Search" @click="initGetUserList">{{$t('table.search')}}</el-button>
      <el-button type="primary" @click="handleDialogValue()">{{$t('table.adduser')}}</el-button>
    </el-row>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column :prop="item.prop" :label="$t(`table.${item.label}`)" :width="item.width"
                       v-for="(item , index) in options"
                       :key="index">
        <template v-if="item.prop === 'enabled'" v-slot="{row}">
          <el-switch v-model="row.enabled" @change= "changeState(row)"/>
        </template>
        <template v-else-if="item.prop === 'createTimeStr'" v-slot="{row}">
          {{$filters.filterTimes(row.createTimeStr)}}
        </template>
        <template #default="{row}" v-else-if="item.prop === 'action'">
          <el-button type="success" :icon="Edit" circle size="small" @click="handleDialogValue(row)"></el-button>
          <el-button type="danger" :icon="Delete" circle size="small" @click="deleteUser(row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:currentPage="queryForm.pageNum"
      :page-sizes="[5, 10, 20]"
      :page-size="queryForm.pageSize"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </el-card>
  <Dialog
    v-model="dialogVisible"
    :dialogTitle='dialogTitle'
    :dialogTableValue='dialogTableValue'
    v-if="dialogVisible"
    @initUserList="initGetUserList"/>
</template>

<script setup>
  import { ref } from 'vue'
  import { Search, Edit, Delete } from '@element-plus/icons-vue'
  import { options } from './options'
  import { delRequest, postRequest, putRequest } from '@/api/request'
  import { ElMessageBox, ElMessage } from 'element-plus'
  import { useI18n } from 'vue-i18n'
  import Dialog from './components/dialog'
  import { isNull } from '@/utils/filters'

  const i18n = useI18n()

  const queryForm = ref({
    query: '',
    pageNum: 1,
    pageSize: 5
  })

  const dialogVisible = ref(false)
  const dialogTitle = ref('')
  const dialogTableValue = ref({})

  const total = ref(0)

  const tableData = ref([])

  const initGetUserList = async () => {
    const param = queryForm.value
    const res = await postRequest('/user/list', param)
    tableData.value = res.records
    total.value = res.total
  }

  initGetUserList()

  const changeState = async (info) => {
    putRequest('/user/id/' + info.id + '/enabled/' + info.enabled, null)
    ElMessage({
      message: i18n.t('message.updeteSuccess'),
      type: 'success'
    })
  }

  const deleteUser = async (id) => {
    ElMessageBox.confirm(
      i18n.t('dialog.deleteTitle'),
      'Warning',
      {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning'
      }
    )
      .then(async () => {
        await delRequest('/user/' + id, null)
        ElMessage({
          type: 'success',
          message: 'Delete completed'
        })
        initGetUserList()
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: 'Delete canceled'
        })
      })
    console.log(id)
    console.log('deleteUser')
  }

  const handleSizeChange = (pageSize) => {
    queryForm.value.pageNum = 1
    queryForm.value.pageSize = pageSize
    initGetUserList()
  }

  const handleCurrentChange = (pageNum) => {
    queryForm.value.pageNum = pageNum
    initGetUserList()
  }

  const handleDialogValue = (row) => {
    if (isNull(row)) {
      dialogTitle.value = '添加用户'
      dialogTableValue.value = {}
    } else {
      dialogTitle.value = '修改用户'
      dialogTableValue.value = JSON.parse(JSON.stringify(row))
    }
    dialogVisible.value = true
  }

</script>

<style lang="scss" scoped>
  .header {
    padding-bottom: 16px;
    box-sizing: border-box;
  }

  ::v-deep .el-pagination{
    padding-top: 16px;
    box-sizing: border-box;
    text-align: right;
  }

</style>
